<template>
  <div>
    <!-- 轮播图 -->
    <div class="carousel">
      <slideshow></slideshow>
    </div>
    <!-- <h1>热门</h1> -->
    <div class="container">
      <cartoon-list :recommend="massage">
        <div class="list-title" slot="title">
          <p>漫画神推篇</p>
          <p>
            <router-link :to="`/more?isLogin=${isLogin}`"
              >查看更多<span>></span></router-link
            >
          </p>
        </div>
      </cartoon-list>
      <loading-comp v-if="isShow"></loading-comp>
    </div>
    <div class="container">
      <cartoon-list :recommend="massage2">
        <div class="list-title" slot="title">
          <p>漫画魔推篇</p>
          <p>
            <router-link :to="`/more?isLogin=${isLogin}`"
              >查看更多 <span>></span></router-link
            >
          </p>
        </div>
      </cartoon-list>
      <loading-comp v-if="isShow"></loading-comp>
    </div>
  </div>
</template>

<script>
import cartoonList from "@/components/CartoonList.vue";
import slideshow from "@/components/Slideshow.vue";
import LoadingComp from "@/components/LoadingComp.vue";
import { get } from "@/http/request.js";

export default {
  name: "Hot",
  data() {
    return {
      massage: [],
      massage2: [],
      isShow: true,
      isLogin: this.$route.query.isLogin,
    };
  },
  components: {
    cartoonList,
    slideshow,
    LoadingComp,
  },
  methods: {
    // 首页神推荐
    async initList() {
      await get(
        `https://apis.netstart.cn/bcomic/HomeFeed?pageNum=1&pageSize=3`
      ).then((data) => {
        if (data && data.code === 0) {
          // console.log("推荐", data);
          this.massage = data.data.feeds;
        }
      });
      this.isShow = false;
    },
    // 首页推荐2
    async initList2() {
      await get(
        `https://apis.netstart.cn/bcomic/HomeFeed?pageNum=2&pageSize=3`
      ).then((data) => {
        if (data && data.code === 0) {
          // console.log("推荐", data);
          this.massage2 = data.data.feeds;
        }
      });
      this.isShow = false;
    },
  },

  mounted() {
    this.initList();
    this.initList2();
  },
};
</script>

<style lang='scss' scope>
.container {
  height: 64.8vw;
  background-color: #fff;
}
.carousel {
  height: 53.3333vw;
  background-color: #fff;
}
.list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 13.3333vw;
  // padding: 0 4vw;
  background-color: #fff;
  p:nth-child(1) {
    font-weight: 600;
    font-size: 4.2667vw;
  }
  p:nth-child(2) {
    a {
      font-size: 3.2vw;
      color: #9b9fa5;
    }
  }
}
</style>